import {Input, View, Textarea, Image} from "@tarojs/components";
import Taro from "@tarojs/taro";
import './index.scss'
import {useState} from "react";

//随机生成文件名
function getFileName(m) {
  m = m > 13 ? 13 : m;
  let num = new Date().getTime();
  return num.toString().substring(13 - m);
}

function Index() {

//转base64 的方法
  const getBase64 = (file)=> {
    return new Promise((resolve)=>{
      console.log(file)
      //获取照片在微信中的暂存路径
      const img = file;
      //获取文件的后缀名
      const fileFromat = img.tempFilePath.substring(img.tempFilePath.lastIndexOf(".") + 1, img
        .tempFilePath.length);
      console.log('后缀名：',fileFromat)
      //wx.getFileSystemManager(),微信自带的 api ，可以将文件路径转换为base64 编码
      const fileManager =Taro.getFileSystemManager();
      const base64 = fileManager.readFileSync(img.tempFilePath, 'base64');
      console.log('转换的64 位',base64)
      img.fileContent = base64;
      img.fileSize = img.size;
      //通过时间获取13位随机数并拼接文件后缀进行命名
      img.fileName = getFileName(13) + '.' + fileFromat;
      img.tempFilePath = `data:image/${fileFromat};base64,${base64}`;

      resolve({
        name:img.fileName,
        path:img.tempFilePath
      })
    })
  }

  //定义删除是否出现
  const [delShow,setDelShow] = useState(false)
  //点击出现删除
  const showDel = ()=>{
    console.log('点击了')
    setDelShow(!delShow)
  }
  //点击删除图片
  const delImg = ()=>{
    setMainImg({
      name:'',
      path:''
    })
  }


  //点击更换
  const btn = ()=>{
    Taro.navigateBack()
  }

  //点击上传主图
  const [mainImg,setMainImg] = useState({
    name:'',
    path:''
  })
  const upImage=()=>{
    Taro.chooseMedia({
      count:1,
      mediaType:['image'],
      sourceType:['album'],
      sizeType:['original'],
      success:(data)=>{
        console.log(data.tempFiles)
        // setMainImg(data.tempFiles[0].path)
        getBase64(data.tempFiles[0])
          .then(res=>{
            console.log(res)
            setMainImg({...res})
          })

      }
    })
  }

  return (
    <View>
      <View style={{backgroundColor:'#fff',height:'80px',lineHeight:'80px'}}>
        <View className='iconfont icon-xiangzuo' style={{position:'absolute',top:'0',left:'0',fontSize:'22px',paddingTop:'6px',display:'flex'}}
              onClick={()=>Taro.navigateBack()}>
          <View style={{fontSize:'14px',paddingLeft:'4px'}}>更改头像</View>
        </View>
        <View style={{textAlign:'center',width:'100%'}}></View>
      </View>
      <View className='list'>
        <View className='item-upImg'>
          <View className='title'>上传头像：</View>
          <View className='img'>
            <View className='img_btn' onClick={upImage} style={{display:mainImg.path!=''?'none':'block'}}>点击上传</View>
            <View className='img_btn del' onClick={delImg} style={{display:mainImg.path!=''&& delShow?'block':'none'}}><View className='chongx'>重新上传</View></View>
            <Image src={mainImg.path} onClick={showDel}></Image>
          </View>
        </View>
      </View>
      <View className='btn' onClick={btn}>确认提交</View>
    </View>
  );

}

export default Index;
